<template>
	<!-- pages/mall/mall.wxml -->
	<view class="mall">
		<view class="search">
			<view class="search_container">
				<image class="search_icon" @tap="onSearch" src="/static/pages/image/search_icon.png" mode="widthFix">
				</image>
				<input class="search_input" @input="bindKeyInput" @blur="onSearch" placeholder="请输入搜索内容" :value="search"
					placeholder-style="color: #ACACAC;">
			</view>
		</view>

		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000">
			<swiper-item v-for="item in banner_list" :key="item.id">
				<image :src="item.img_patch" mode="" class="swiper_image"></image>
			</swiper-item>
		</swiper>
		
		<view class="classify">
			<view class="classify_item" v-for="item in goods_type">
				<image class="item_image" :src="item.image" mode=""></image>
				<text class="item_name">{{item.name}}</text>
			</view>
			
			<view class="classify_item" @click="toCategory">
				<image class="item_image" src="../../static/pages/image/classify.png" mode=""></image>
				<text class="item_name">更多分类</text>
			</view>
		</view> 
		<!-- <image class="head" src="https://www.hunanlongyun.com/attachment/images/market/10/595/cars/cars35766092871f0d713248da6bbe02b16a.png" mode="widthFix"></image> -->

<!-- 		<view class="tab_bar">
			<scroll-view scroll-x="true">
				<view class="tabBar_container">
					<view v-for="(item, index) in tab_list" :key="index"
						:class="'item ' + (isActive == item.id ? 'avtive' : '')" :data-id="item.id"
						@tap="onChangeActive">
						<text class="item_lab">{{item.name}}</text>
						<view class="item_line" :style="isActive == item.id? '' : 'width:0;'"></view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="commodity">
			<view class="commodity_list">
				<view v-for="(item, index) in commodity_list" :key="index" class="commodity_item" :data-id="item.id"
					@tap="toDetails">
					<image class="item_img" :src="filter.getImageFile(item.image)" mode></image>
					<view class="item_content">
						<text class="item_title">{{item.title || '-'}}</text>
						<view class="item_box">
							<view class="box_left">
								<view class="box_money">
									<text class="money_symbol">¥</text>
									<text class="money_txt">{{filter.getPriceIntegr(item.market_price)}}</text>
									<text class="money_decimal">.{{filter.getPriceDecimals(item.market_price)}}</text>
								</view>
								<text class="box_sales">月销{{item.sold_count}}件</text>
							</view>
							<!-- <image class="box_right" src="../image/ellipsis.pic"></image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
	<!-- 	<view class="more">
			<image @click="toShoppingTrolley" class="more_mall_select.png" src="../../static/pages/image/mall_select.png" mode="widthFix"></image>
			<image @click="toCategory" class="more_classify" src="../../static/pages/image/all.png" mode="widthFix"></image>
		</view>
		 -->
		<load-more :load="load" @onMore="onMore"></load-more>
	</view>
</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>

<script>
	// pages/mall/mall.js
	var app = getApp();
	import loadMore from "../../components/load-more/load-more";

	export default {
		data() {
			return {
				isActive: -1,
				tab_list: [{
					name: '推荐',
					id: -1
				}],
				commodity_list: [],
				pageNum: 1,
				// loading noMore more
				load: 'noMore',
				search: '',
				goods_type: [],
				banner_list: []
			};
		},

		components: {
			loadMore
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},
		
		onTabItemTap(e){
			console.log(e);
			if(e.index == 2){
				console.log("点击了商城");
				uni.redirectTo({
					url:'/pagesA/tabber/a'
				})
				// uni.hideTabBar({
					
				// })
			}
		},
		
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				load: 'more',
				pageNum: 1,
				commodity_list: []
			});
			this.getGoodsType();
			this.getGoodsList();
			this.getBanner()
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			toShoppingTrolley(){
				uni.navigateTo({
					url:'/pagesA/shoppingTrolley/shoppingTrolley'
				})
			},
			getBanner() {
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "home.index.home1"
					},
					success: res => {
						this.banner_list = res.data.data.banner
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},
			onMore() {
				if (this.load != 'more') return;
				this.getGoodsList();
			},

			bindKeyInput(event) {
				this.setData({
					search: event.detail.value
				});
			},

			// 搜索
			onSearch() {
				wx.showLoading({
					title: '加载中'
				});
				this.setData({
					pageNum: 1,
					commodity_list: []
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.search",
						leftid: this.pageNum,
						search: this.search
					},
					success: res => {
						let {
							commodity_list
						} = this;
						this.setData({
							commodity_list: commodity_list.concat(res.data.data)
						});
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			// 改变选中
			onChangeActive(event) {
				const id = event.currentTarget.dataset['id'];
				this.setData({
					isActive: id,
					pageNum: 1,
					commodity_list: []
				});
				this.getGoodsList();
			},

			// 详情
			toDetails(event) {
				wx.navigateTo({
					url: '/pagesA/productDetails/productDetails?id=' + event.currentTarget.dataset['id']
				});
			},

			// 获取商品分类 
			getGoodsType() {
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.goods_type"
					},
					success: res => {
						let goods_type = [{
							name: '推荐',
							id: -1
						}];
						this.goods_type = res.data.data
						goods_type = goods_type.concat(res.data.data);
						this.setData({
							tab_list: goods_type
						});
					},
					fail: res => {}
				});
			},

			// 获取商品列表
			getGoodsList() {
				this.setData({
					load: 'loading'
				});
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.index",
						shop_type_id: this.isActive,
						leftid: this.pageNum
					},
					success: res => {
						let {
							commodity_list
						} = this;
						let load = 'more';
						if (res.data.data.length < 6) load = 'noMore';
						this.setData({
							load,
							pageNum: this.pageNum + 1,
							commodity_list: commodity_list.concat(res.data.data)
						});
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			// 滑动到底部事件
			bindscrolltolower(event) {
				console.log('底部');
			},

			toCategory() {
				uni.navigateTo({
					url: '/pagesA/category/category'
				})
			}
		}
	};
</script>
<style lang="scss">
	@import "./mall.css";

	.swiper {
		padding: 0 31upx;
		box-sizing: border-box;
	}

	.swiper_image {
		width: 100%;
		height: 259rpx;
	}

	.classify {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 36upx;
	}

	.classify_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.item_image {
			width: 76rpx;
			height: 76rpx;
			margin-bottom: 17rpx;
		}

		.item_name {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	
	.more{
		position: fixed;
		right: 50rpx;
		bottom: 180rpx;
		display: flex;
		flex-direction: column;
		.more_classify{
			margin-top: 20rpx;
			width: 50rpx;
		}
		
		.more_mall_select{
			width: 50rpx;
		}
	}
</style>
